<!-- templates/index.html -->
{% load static %}
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Django + Vuetify 3 (CDN)</title>

    <link rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:400,500,700" />

    <!-- Material Design Icons -->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/materialdesignicons.min.css' %}" />

    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="{% static 'js/vue.global.js' %}"></script>

    <!-- Vuetify 3 -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="{% static 'css/vuetify.min.css' %}" />
    <!-- <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.js"></script> -->
    <script src="{% static 'js/vuetify.min.js' %}"></script>

    <style>
        /* 抽屉菜单项悬停效果 */
        .v-list-item {
            transition: background-color 0.2s ease;
        }

        .v-list-item:hover {
            background-color: #e3f2fd !important;

        }

        /* 可选：更明显的效果 */
        .v-list-item.active:hover {
            background-color: rgba(25, 118, 210, 0.2) !important;
        }

        .v-card-actions .v-btn {
            margin-top: 4px;
        }

        /* 子菜单项更小的字体 */
        .v-list-item.pl-8 .v-list-item-title {
            font-size: 0.95rem;
        }

        /* 悬停背景色 */
        .v-list-item:hover {
            background-color: rgba(67, 160, 71, 0.1) !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- Vuetify 组件将在这里渲染 -->
        <v-app>

            <v-app-bar color="primary" dark>
                <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
                <v-app-bar-title>My Django App</v-app-bar-title>

                <!-- <div class="ml-4 d-flex align-center" style="color: white; font-size: 14px; padding-right: 1%;">
          <a href="#" style="color: rgba(255,255,255,0.9); text-decoration: none;">欢迎, Admin</a>
          <span style="color: rgba(255,255,255,0.6); margin: 0 8px;"> | </span>
          <a href="#" style="color: rgba(255,255,255,0.9); text-decoration: none;" @click="toggleTheme">更换主题</a>
          <span style="color: rgba(255,255,255,0.6); margin: 0 8px;"> | </span>
          <a href="#" style="color: rgba(255,255,255,0.9); text-decoration: none;">退出</a>
        </div> -->
                <!-- 欢迎信息 -->
                <span class="mr-2">欢迎，{{ currentUser }} </span>

                <!-- 主题切换 -->
                <v-btn icon variant="text" @click="toggleTheme" title="更换主题">
                    |
                    <v-icon>mdi-theme-light-dark</v-icon>
                </v-btn>

                <!-- 退出 -->
                <v-btn icon variant="text" href="/logout/" title="退出登录">
                    |
                    <v-icon>mdi-logout</v-icon>
                </v-btn>
                </v-btn>

            </v-app-bar>

            <!-- <v-navigation-drawer v-model="drawer" temporary>
        <v-list nav dense>
          <v-list-item v-for="(item, index) in menuItems" :key="index" :href="item.href" :title="item.title"
            style="color: inherit; text-decoration: none;">
            <templates v-slot:prepend>
              <v-icon :icon="item.icon" class="mr-2"></v-icon>
            </templates>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-navigation-drawer> -->

            <v-navigation-drawer v-model="drawer" temporary>
                <v-list nav>

                    <!-- 业务处理1 折叠菜单 -->
                    <v-list-group value="business1">
                        <template v-slot:activator="{ props }">
                            <v-list-item v-bind="props" title="业务处理1" prepend-icon="mdi-cog"></v-list-item>
                        </template>

                        <!-- 子菜单项 -->
                        <v-list-item title="准备工作" href="/app1/prepare/" link class="pl-8">
                            <template v-slot:prepend>
                                <v-icon class="mr-2">mdi-file-document-outline</v-icon>
                            </template>
                        </v-list-item>

                        <v-list-item title="业务处理" href="/app1/process/" link class="pl-8">
                            <template v-slot:prepend>
                                <v-icon class="mr-2">mdi-refresh</v-icon>
                            </template>
                        </v-list-item>
                    </v-list-group>

                    <!-- 业务处理2 折叠菜单 -->
                    <v-list-group value="business2">
                        <template v-slot:activator="{ props }">
                            <v-list-item v-bind="props" title="业务处理2" prepend-icon="mdi-chart-bar"></v-list-item>
                        </template>

                        <!-- 子菜单项 -->
                        <!-- <v-list-item
              title="准备工作"
              href="/app2/prepare/"
              link
              class="pl-8"
            >
              <template v-slot:prepend>
                <v-icon class="mr-2">mdi-file-document-outline</v-icon>
              </template>
            </v-list-item> -->

                        <v-list-item title="业务处理" href="/app2/process/" link class="pl-8">
                            <template v-slot:prepend>
                                <v-icon class="mr-2">mdi-refresh</v-icon>
                            </template>
                        </v-list-item>
                    </v-list-group>

                </v-list>
            </v-navigation-drawer>

            <!-- <v-main>
        <v-container class="pa-12">
          <v-card class="mx-auto" max-width="600" title="欢迎使用 Vuetify 3" subtitle="无需构建，直接在 Django 中使用">
            <v-card-text>
              这是一个通过 CDN 加载的 Vuetify 3 页面，支持主题切换和响应式布局。
            </v-card-text>
            <v-card-actions>
              <v-btn color="primary" variant="flat">点击我</v-btn>
              <v-btn color="secondary" variant="outlined">次级按钮</v-btn>
            </v-card-actions>
          </v-card>
        </v-container>
      </v-main> -->
            <v-main>
                <v-container class="pa-4" style="max-width: 800px; margin: 0 auto;">
                    {% csrf_token %}



                    <v-card title="文件上传中心" subtitle="为三个业务流程上传所需文件">
                        <v-card-text>
                            <v-row>
                                <!-- 业务处理1 -->
                                <v-col cols="12">
                                    <v-file-input label="业务处理1 - 上传文件" placeholder="请选择文件" variant="outlined"
                                        prepend-icon="mdi-paperclip" show-size counter accept=".pdf,.doc,.docx,.xlsx"
                                        :messages="`支持格式：PDF、Word、Excel`"
                                        @change="onFileChange($event, 1)"></v-file-input>
                                </v-col>

                                <!-- 业务处理2 -->
                                <v-col cols="12">
                                    <v-file-input label="业务处理2 - 上传文件" placeholder="请选择文件" variant="outlined"
                                        prepend-icon="mdi-paperclip" show-size counter accept=".pdf,.csv,.xlsx"
                                        :messages="`支持格式：PDF、CSV、Excel`"
                                        @change="onFileChange($event, 2)"></v-file-input>
                                </v-col>

                                <!-- 业务处理3 -->
                                <v-col cols="12">
                                    <v-file-input label="业务处理3 - 上传文件" placeholder="请选择文件" variant="outlined"
                                        prepend-icon="mdi-paperclip" show-size counter accept=".zip,.rar,.7z"
                                        :messages="`支持格式：ZIP、RAR 压缩包`" @change="onFileChange($event, 3)"></v-file-input>
                                </v-col>
                                <!-- 业务处理3 -->
                                <v-col cols="12">
                                    <v-file-input label="业务处理3 - 上传文件" placeholder="请选择文件" variant="outlined"
                                        prepend-icon="mdi-paperclip" show-size counter accept=".zip,.rar,.7z"
                                        :messages="`支持格式：ZIP、RAR 压缩包`" @change="onFileChange($event, 3)"></v-file-input>
                                </v-col>
                            </v-row>
                        </v-card-text>

                        <v-card-actions>
                            <v-btn color="primary" variant="flat" block @click="submitAll">提交文件</v-btn>
                        </v-card-actions>
                        <v-card-actions>
                            <v-btn color="secondary" variant="outlined" block @click="clearAll">清空文件</v-btn>
                        </v-card-actions>
                    </v-card>

                </v-container>
            </v-main>

        </v-app>
    </div>

    <script>
        const { createApp } = Vue;

        // 定义自定义主题
        const lightTheme = {
            dark: false,
            colors: {
                background: '#FFFFFF',
                surface: '#FFFFFF',
                primary: '#43A047',     /* 绿色主色 */
                secondary: '#5C6BC0',
                accent: '#8D6E63',
                error: '#EF5350',
                info: '#29B6F6',
                success: '#66BB6A',
                warning: '#FFB74D',
            }
        };

        const darkTheme = {
            dark: true,
            colors: {
                background: '#121212',
                surface: '#212121',
                primary: '#4DB6AC',
                secondary: '#7E57C2',
                accent: '#BDBDBD',
                error: '#EF9A9A',
                info: '#4FC3F7',
                success: '#81C784',
                warning: '#FFD54F',
            }
        };

        // 创建 Vuetify 实例
        const vuetify = Vuetify.createVuetify({
            theme: {
                defaultTheme: 'lightTheme',
                themes: {
                    lightTheme,
                    darkTheme
                }
            }
        });

        // 创建 Vue 应用
        const app = createApp({
            data: () => ({
                drawer: false,
                theme: 'lightTheme',
                menuItems: [
                    { title: '业务处理1', href: '/app1/index', icon: 'mdi-cog' },
                    { title: '业务处理2', href: '/app2/index', icon: 'mdi-chart-bar' },
                    { title: '业务处理3', href: '/app3/index', icon: 'mdi-package-variant' },
                ]
            }),
            methods: {
                toggleTheme() {
                    this.theme = this.theme === 'lightTheme' ? 'darkTheme' : 'lightTheme';
                    this.$vuetify.theme.name = this.theme;
                },
                submitFile(step) {
                    const input = this.$refs[`fileInput${step}`]?.$el?.querySelector('input[type="file"]');
                    const file = input?.files[0];

                    if (!file) {
                        alert(`业务处理${step}：请先选择文件`);
                        return;
                    }

                    const formData = new FormData();
                    formData.append('file', file);

                    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value || '{{ csrf_token }}';

                    fetch(`/app${step}/upload/`, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRFToken': csrfToken
                        },
                        credentials: 'same-origin'
                    })
                        .then(response => {
                            if (response.ok) {
                                alert(`业务处理${step}：文件上传成功！`);
                                input.value = '';  // ✅ 清空文件栏
                            } else {
                                return response.text().then(text => {
                                    alert(`上传失败: ${text.slice(0, 200)}`);
                                });
                            }
                        })
                        .catch(error => {
                            alert(`网络错误: ${error.message}`);
                        });
                },
                clearFile(step) {
                    const input = this.$refs[`fileInput${step}`]?.$el?.querySelector('input[type="file"]');
                    if (input) {
                        input.value = '';
                        alert(`业务处理${step}：文件已清空`);
                    }
                },
                onFileChange(event, step) {
                    const file = event.target?.files?.[0];
                    if (file) {
                        console.log(`业务处理${step} 选择了文件:`, file.name);
                        // 可在此处添加上传逻辑（如 FormData + fetch）
                    }
                },
                submitAll() {
                    const formData = new FormData();
                    const inputs = document.querySelectorAll('input[type="file"]');
                    inputs.forEach((input, i) => {
                        if (input.files.length > 0) {
                            formData.append(`file${i + 1}`, input.files[0]);
                        }
                    });

                    fetch('/app1/prepare/', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRFToken': '{{ csrf_token }}'
                        }
                    }).then(() => alert('上传成功'));
                },
                clearAll() {
                    // 重置所有 file input
                    const inputs = document.querySelectorAll('input[type="file"]');
                    inputs.forEach(input => {
                        input.value = '';
                    });
                    alert("已清空所有文件");
                }
            },
        });

        // 使用 Vuetify 插件
        app.use(vuetify);

        // 挂载
        app.mount('#app');
    </script>

</body>

</html>